<script setup lang="ts">
import DiskInfo from '@/components/DiskInfo.vue'
</script>

<template>
  <div>
    <div class="project-info">
      <p class="project-link">
        项目地址:
        <a
          href="https://gitee.com/liumou_site/disk-monitoring"
          target="_blank"
          rel="noopener noreferrer"
          class="project-url"
        >
          https://gitee.com/liumou_site/disk-monitoring
        </a>
      </p>
    </div>

    <DiskInfo />
  </div>
</template>

<style scoped lang="scss">
@use '@/style/variables.scss' as vars;

.project-info {
  text-align: center;
  margin-bottom: vars.$spacing-lg;
  padding: vars.$spacing-md;
  border-radius: vars.$radius-md;
  background: vars.$bg-glass;
  backdrop-filter: blur(10px);
}

.project-link {
  margin: 0;
  font-size: vars.$font-size-base;
  color: vars.$text-secondary;
}

.project-url {
  color: vars.$primary-color;
  text-decoration: none;
  transition: color vars.$transition-normal;
  word-break: break-all;

  &:hover {
    color: vars.$primary-hover;
    text-decoration: underline;
  }
}
</style>
